{include file="public/header" /}
<link rel="stylesheet" href="/static/admin/addons/builder/css/base.css" media="all">
<style>

    .m-table {
        background-color: rgb(255, 255, 255);
        display: none;
        z-index: 1005;
        position: absolute;
        width: 100%;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }

    .layui-table-view .layui-table[lay-size=sm] .layui-table-cell {
        height: 34px !important;
        line-height: 25px !important;
    }

    #mTable_choose {
        margin: 0 !important;
    }

    .layui-form-item {
        margin-bottom: 15px !important;
        clear: both;
        *zoom: 1;
    }

    .layui-table table tr:hover, .layui-table-hover {
        background-color: #FFF9E6 !important;
    }

</style>
<body>
<div class="layui-fluid layui-anim layui-anim-fadein">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form v3-admin-form" action="{:url('recharge')}" id="form">
                <input type="hidden" name="type" value="save"/>
                <input type="hidden" id="code" name="code"/>
                <input type="hidden" id="id" name="id"/>
                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">充值会员</label>
                            <div class="layui-input-block">
                                <input type="text" id="choose" name="name" value="" autocomplete="off"
                                       placeholder="姓名、编号、手机号" class="layui-input">
                                <div id="mTable_wrap_choose" class="layui-anim layui-anim-scale m-table"
                                     style="bottom: auto; display: none;">
                                    <div class="search-triangle"></div>
                                    <table class="layui-table" id="mTable_choose" lay-filter="mTable_choose"></table>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">充值账户</label>
                            <div class="layui-input-block">
                                <select id="account" name="account" lay-verify="required" lay-filter="account"
                                        lay-reqtext="请选择要充值的账户" lay-verType="tips">
                                    <option value="">请选择</option>
                                    {foreach name="assets" item="vo" }
                                    <option value="{$key}">{$vo}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">账户余额</label>
                            <div class="layui-input-block">
                                <input type="text" placeholder="请选择要充值的账户" autocomplete="off"
                                       class="layui-input account_val"
                                       disabled>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">充值方式</label>
                            <div class="layui-input-block">
                                <input type="radio" name="mode" value="1" title="增加" checked>
                                <input type="radio" name="mode" value="2" title="减少">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">充值金额</label>
                            <div class="layui-input-block">
                                <input type="text" name="amount" lay-verify="required"
                                       onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
                                       placeholder="请填写增加/减少的金额"
                                       autocomplete="off" class="layui-input" lay-reqtext="请填写增加/减少的金额"
                                       lay-verType="tips">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">充值备注</label>
                            <div class="layui-input-block">
                                <input type="text" name="remarks" placeholder="充值备注(选填)" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="layui-footer" style="left: 0;">
    <button class="layui-btn" lay-filter="saveRecharge" lay-submit formObj="#form">充值
    </button>
    <a class="layui-btn layui-btn-primary" onclick="parent.layer.closeAll();">关闭</a>
</div>
</body>
{include file="public/footer" /}
<script>
    layui.use(['form', 'table', 'form'], function () {
        table = layui.table;
        mTable_wrap_choose = $('#mTable_wrap_choose');
        form = layui.form;
        $("#choose").bind('input propertychange', function (e) {
            $(".account_val").val('');
            var value = e.delegateTarget.value;
            if (!value) {
                mTable_wrap_choose.hide();
                return false;
            }
            table.render({
                elem: '#mTable_choose'
                , id: 'mTable_choose'
                , url: '{:url("user/recharge")}?val=' + value + '&type=get'
                , even: true
                , size: 'sm'
                , cols: [[
                    {field: 'id', title: 'ID'}
                    , {field: 'nickname', title: '昵称'}
                    , {field: 'code', title: '编号'}
                    , {field: 'mobile', title: '手机号'}
                ]]
                , page: true
            });
            mTable_wrap_choose.show();
        });

        //触发行单击事件
        table.on('row(mTable_choose)', function (obj) {
            if (!obj.data.id) return false;
            mTable_wrap_choose.hide();
            $("#code").val(obj.data.code);
            $("#id").val(obj.data.id);
            $("#choose").val(obj.data.nickname + ' - ' + obj.data.code + ' - ' + obj.data.mobile);
            getBalance($("#account").val(), obj.data.id)
        });

        form.on('select(account)', function (data) {
            var id = $("#id").val();
            if (!id) {
                layer.msg('请先选择要充值的会员');
                return false;
            }
            if (data.value) {
                getBalance(data.value, id)
            } else {
                $('.account_val').val('');
            }
        });

        //监听表单提交
        form.on('submit(saveRecharge)', function (data) {
            layer.load();
            var btn = $(this);
            btn.attr('disabled', true);
            formObj = $($(this).attr('formObj'));
            url = formObj.attr('action');
            $.ajax({
                type: 'POST',
                url: url,
                data: formObj.serialize(),
                dataType: "json",
                success: function (data) {
                    layer.closeAll();
                    if (data.code == 1) {
                        notify.success(data.msg, 1000, function () {
                            parent.layer.closeAll();
                            parent.layui.table.reload('form_table');
                        });
                    } else {
                        notify.error(data.msg);
                        btn.removeAttr('disabled');
                    }
                },
                error(e) {
                    layer.closeAll();
                    btn.removeAttr('disabled');
                }
            });
            return false;
        })

        function getBalance(value, id) {
            if (value && id) {
                $.ajax({
                    type: 'GET',
                    url: '{:url("user/recharge")}',
                    data: {val: value, id: id, type: 'account'},
                    dataType: "json",
                    success: function (data) {
                        if (data.code == 1) {
                            $('.account_val').val(data.result);
                        } else {
                            layer.msg(data.msg);
                        }
                    }
                });
            }

        }

        // $(".layui-card-body").click(function () {
        //     mTable_wrap_choose.hide();
        // });


    });
</script>
</html>